<template>
  <div>
    <Modal
      v-model="$store.state.downloadModelFlag"
      title="提示"
      :footer-hide="true"
      :mask-closable="false"
      @on-cancel="downloadModelCancel">
      <div class="downText">正在生成中，稍后请至下载中心下载。</div>
      <div class="downloadFooter">
        <Button type="info" @click="goList">打开下载中心</Button>
      </div>
    </Modal>

    <Modal
      v-model="listFlagChild"
      title="下载中心"
      :footer-hide="true"
      width="80%"
      @on-cancel="downloadListCancel">
      <div class="searchBox">
        <dt-search ref="search" :xlBtn="4"></dt-search>
      </div>
      <dt-grid ref="table" :page="page" :onFetch="onFetch" :height="450" />
    </Modal>
  </div>
</template>
<script>
  import downloadMgr from '@/biz/download/download'
  import toolApi from '@/biz/base/tool'
  import columnOpt from './opt/downloadModelColumn.js'
  import searchOpt from './opt/downloadModelSearch'
  import tool from '@/common/tool.js'
  export default {
    props: ['listFlag'],
    data() {
      return {
        page: {
          total: 0
        },
        cityAttrSort: [],
        timeFrame11: [
          this.$tool.currentMonth()[0],
          this.$tool.currentMonth()[1]
        ],
        city: [],
        formValidate11: {
          time: tool.currentMonth(),
          startDate: this.$tool.currentMonth()[0],
          endDate: this.$tool.currentMonth()[1],
          cityCode: '',
          buildingName: ''
        },
        loading: true,
        listFlagChild: false
      }
    },
    created() {
      console.log('vvvvvvvvv')
    },
    computed: {},
    methods: {
      handleReset() {
        this.city = []
        this.timeFrame11 = [
          this.$tool.currentMonth()[0],
          this.$tool.currentMonth()[1]
        ]
        this.formValidate11 = {
          time: tool.currentMonth(),
          startDate: this.$tool.currentMonth()[0],
          endDate: this.$tool.currentMonth()[1],
          cityCode: '',
          buildingName: ''
        }
      },
      enclosureDownload(val) {
        // toolApi.downloadFile(val.downloadPath, val.downloadName, true);
        const tmpFileName = val.downloadPath.split('/').pop()
        const urlPath = val.downloadPath.split(tmpFileName)[0]
        let urlPathload = urlPath + encodeURIComponent(tmpFileName)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = urlPathload
        link.setAttribute('download', `${val.downloadName}`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },

      onFetch(data) {
        this.paramsAll = {
          ...data
        }

        if (!data.startDate) {
          this.paramsAll.startDate = this.$tool.currentMonth()[0]
        }
        if (!data.endDate) {
          this.paramsAll.endDate = this.$tool.currentMonth()[1]
        }
        if (data && data.city) {
          this.paramsAll.cityCode = data.city[1]
        }
        delete this.paramsAll.time
        return downloadMgr
          .downloadlList(this.paramsAll)
          .then((res) => {
            this.page.total = res.total
            return res.list
          })
          .catch((err) => {
            this.total = 0
          })
      },
      downloadlUpdateStatusChange() {
        let params = {}
        downloadMgr.downloadlUpdateStatus(params).then((res) => {
          this.$store.dispatch('badgeCount', 0)
        })
      },

      goList() {
        this.$store.dispatch('downloadModelFlag', false)
        this.listFlagChild = true
        this.downloadlUpdateStatusChange()
        this.$refs.table.fetch()
      },
      downloadListCancel() {
        this.city = []
        this.timeFrame11 = [
          this.$tool.currentMonth()[0],
          this.$tool.currentMonth()[1]
        ]
        this.formValidate11 = {
          time: tool.currentMonth(),
          startDate: this.$tool.currentMonth()[0],
          endDate: this.$tool.currentMonth()[1],
          cityCode: '',
          buildingName: ''
        }
        this.$refs.search.init(
          this.$refs.table,
          new searchOpt(this).options(),
          this.formValidate11
        )
        this.$emit('downloadListCancel')
      },
      downloadModelCancel() {
        this.$store.dispatch('downloadModelFlag', false)
      }
    },
    mounted() {
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.search.init(
        this.$refs.table,
        new searchOpt(this).options(),
        this.formValidate11
      )
      this.$refs.table.fetch()
    },
    watch: {
      listFlag(val) {
        this.listFlagChild = val
        this.$refs.table.fetch()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .downloadFooter {
    text-align: center;
  }

  .downText {
    text-align: center;
    padding: 50px 0;
  }

  .searchBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
